<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="发送成功请求" onclick="sendSuccessReq()">
    <input type="button" value="发送超时请求" onclick="sendTimeoutReq()">
    <input type="button" value="发送中止请求" onclick="sendAbortReq()">
    <input type="button" value="发送失败请求" onclick="sendErrorReq()">
  </body>
  
  <script>
    function addXhrEvent(xhr) {
      xhr.onloadstart = () => {
        console.log('请求发出');
      };
      xhr.onprogress = (e) => {
        console.log('正在发送和加载数据');
      };
      xhr.ontimeout = () => {
        console.log('请求超时');
      };
      xhr.onloadend = () => {
        console.log('请求无论成功或失败完成');
      };
      xhr.onload = () => {
        console.log('请求成功完成');
      };
      xhr.onabort = () => {
        console.log('请求中止');
      };
      xhr.onerror = () => {
        console.log('请求失败');
      };
    }
    
    // 输出结果：请求发出 正在发送和加载数据 请求成功完成 请求无论成功或失败完成
    function sendSuccessReq() {
      const xhr = new XMLHttpRequest();
      
      addXhrEvent(xhr);
      
      xhr.open('GET', 'http://localhost:9000/back_end_get/params?query_name=query');
      xhr.send(null);
    }
    
    // 输出结果：请求发出 请求超时 请求无论成功或失败完成
    function sendTimeoutReq() {
      const xhr = new XMLHttpRequest();
      
      xhr.timeout = 2500;
      
      addXhrEvent(xhr);
      
      xhr.open('GET', 'http://localhost:9000/back_end_get/params?query_name=query');
      xhr.send(null);
    }
    
    // 输出结果：请求发出 请求中止 请求无论成功或失败完成
    function sendAbortReq() {
      const xhr = new XMLHttpRequest();
      
      setTimeout(() => {
        xhr.abort();
      }, 1000);
      
      addXhrEvent(xhr);
      
      xhr.open('GET', 'http://localhost:9000/back_end_get/params?query_name=query');
      xhr.send(null);
    }
    
    // 输出结果：请求发出 请求失败 请求无论成功或失败完成
    function sendErrorReq() {
      const xhr = new XMLHttpRequest();
      
      addXhrEvent(xhr);
      
      xhr.open('GET', 'http://localhost:9000/back_end_error');
      xhr.send(null);
    }
  </script>
</html>